﻿@page "/books"
@using MatBlazorSample.Books
@inherits MatBlazorSampleComponentBase
@using MatBlazorSample.Localization
@using Microsoft.Extensions.Localization
@using System.Globalization
@inject IStringLocalizer<MatBlazorSampleResource> L

<h3>Books</h3>

@if ( Loading )
{
    <span>Loading...</span>
}
else
{
    <MatButton Raised="true" OnClick="@OpenCreateBookModalAsync">New Book</MatButton>

    <MatTable Items="@BookList" class="mat-elevation-z5">
        <MatTableHeader>
            <th style="width: 60%;">Name</th>
            <th style="width: 10%;">Price</th>
            <th style="width: 10%;">Publish Date</th>
            <th style="width: 20%;"></th>
        </MatTableHeader>
        <MatTableRow>
            <td style="width: 60%;">@context.Name</td>
            <td style="width: 10%;">@context.Price.ToString( "C2", new CultureInfo( "en-US" ) )</td>
            <td style="width: 10%;">@context.PublishDate.ToString( "dd/MM/yyyy" )</td>
            <td style="width: 20%;">
                <MatButton OnClick="@(()=>OpenEditingBookModalAsync(context))"><MatIcon Icon="edit" /></MatButton>
                <MatButton OnClick="@(()=>DeleteBookAsync(context))"><MatIcon Icon="delete" /></MatButton>
            </td>
        </MatTableRow>
    </MatTable>

    <MatDialog @bind-IsOpen="@NewDialogOpen">
        <MatDialogTitle>New book</MatDialogTitle>
        <MatDialogContent>
            <p>Name</p>
            <MatTextField @bind-Value="@NewBookDto.Name" />
            <p>Price</p>
            <MatNumericUpDownField @bind-Value="@NewBookDto.Price" />
            <p>Publish Date</p>
            <MatDatePicker @bind-Value="@NewBookDto.PublishDate" />
        </MatDialogContent>
        <MatDialogActions>
            <MatButton OnClick="@(e => { NewDialogOpen = false; })">Cancel</MatButton>
            <MatButton OnClick="@CreateBookAsync">Create</MatButton>
        </MatDialogActions>
    </MatDialog>

    <MatDialog @bind-IsOpen="@EditingDialogOpen">
        <MatDialogTitle>Edit book</MatDialogTitle>
        <MatDialogContent>
            <p>Name</p>
            <MatTextField @bind-Value="@EditingBookDto.Name" />
            <p>Price</p>
            <MatNumericUpDownField @bind-Value="@EditingBookDto.Price" />
            <p>Publish Date</p>
            <MatDatePicker @bind-Value="@EditingBookDto.PublishDate" />
        </MatDialogContent>
        <MatDialogActions>
            <MatButton OnClick="@(e => { EditingDialogOpen = false; })">Cancel</MatButton>
            <MatButton OnClick="@UpdateBookAsync">Update</MatButton>
        </MatDialogActions>
    </MatDialog>
}

